<template>
  <view class="edit">
    <form @submit="onSubmit">
      <view class="item">
        <input v-model="formValue.title" type="text" name="title" placeholder="请输入标题"></input>
      </view>

      <view class="item">
        <input v-model="formValue.author" type="text" name="author" placeholder="请输入作者"></input>
      </view>

      <view class="item">
        <textarea v-model="formValue.content" name="content" placeholder="请输入详细内容"></textarea>
      </view>

      <view v-if="formValue.videourl && formValue.videourl.length">
        <video :src="formValue.videourl[0]"></video>
      </view>

      <view class="item">
        <uni-file-picker
         v-model="imageValue" 
         fileMediatype="image" 
         ref="imageFiles"
         title="至多选择9张图片" 
         :auto-upload="false"
         mode="grid" 
         @success="uploadImage" />
      </view>

      <view class="item">
        <uni-file-picker 
         v-model="videoValue"
         fileMediatype="video"
         mode="grid"
         limit="1"
         ref="videoFile"
         title="请选择1个视频文件"
         :auto-upload="false"
         @success="uploadVideo"
        />
      </view>

      <view class="item">
        <button form-type="reset">清空表单</button>
        <button form-type="submit" type="primary" :disabled="inDisabled(formValue)">提交修改</button>
      </view>

    </form>
  </view>
</template>

<script>
  let id;
  export default {
    data() {
      return {
        picurls: [],
        videourl: [],
        imageValue: [],
        videoValue: [],
        formValue: {
          title: "",
          author: "",
          content: "",
        }
      };
    },
    onLoad(e) {
      id = e.id;
      this.getDetail();
    },
    methods: {
      //图片上传成功
      uploadImage(e) {
        this.picurls = e.tempFilePaths
      },
      uploadVideo(e) {
        this.videourl = e.tempFilePaths
      },

      //获取详情
      getDetail() {
        uniCloud.callFunction({
          name: "art_get_one",
          data: {
            id
          }
        }).then(res => {
          this.formValue = res.result.data[0]
          if (!this.formValue.picurls) return;
          this.imageValue = this.formValue.picurls.map(item => {
            return {
              url: item
            }
          })
          this.videoValue = this.formValue.videourl.map(item => {
            return {
              url: item
            }
          })
        })
      },

      //判断按钮是否禁用
      inDisabled(obj) {
        let bool = Object.keys(obj).some((key, value) => obj[key] === '')
        return bool;
      },
      //点击提交
      async onSubmit() {
        await this.$refs.imageFiles.upload()
        await this.$refs.videoFile.upload()
        
        let _picurls = this.imageValue.map(item => {
          return item.url;
        })
        let _videourl = this.videoValue.map(item => {
          return item.url;
        })
        uniCloud.callFunction({
          name: "art_update",
          data: {
            detail: this.formValue,
            picurls: _picurls,
           videourl: _videourl
          }
        }).then(res => {
          console.log(res);
          uni.showToast({
            title: "修改成功"
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .edit {
    padding: 30rpx;

    .item {
      padding-bottom: 20rpx;

      input,
      textarea {
        border: 1rpx solid #eee;
        height: 80rpx;
        padding: 0 20rpx;
      }

      textarea {
        height: 200rpx;
        width: 100%;
        box-sizing: border-box;
      }

      button {
        margin-bottom: 20rpx;
      }
    }
  }
</style>
